import React, {Component} from 'react';
import {View,Text,StyleSheet,Image,Dimensions,ScrollView,TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Carousel from 'react-native-snap-carousel';

const img1 = require('../../imgs/1.jpg');
const img2 = require('../../imgs/2.jpg');
const img3 = require('../../imgs/3.jpg');
const img4 = require('../../imgs/4.jpg');

class Index extends Component {
  constructor(props){
    super(props);
    this.state={
      cleanItemData: [
        {title:'洗衣',imgUrl:img1},
        {title:'洗鞋',imgUrl:img2},
        {title:'洗家纺',imgUrl:img3},
        {title:'窗帘清洗',imgUrl:img4}
      ],
      bestProduct: [
        {imgUrl:img1,newPrice:5.0,oldPrice:25.0,detail:'单衬衫'},
        {imgUrl:img2,newPrice:139.0,oldPrice:177.0,detail:'三件悠然洗，不支持余额，e卡'},
      ],
      serviceIntroData: [
        {icon:<Ionicons color={'#555'} name={'server'} size={50}/>,title:'服务介绍'},
        {icon:<Ionicons color={'#555'} name={'earth'} size={50}/>,title:'服务范围'},
        {icon:<Ionicons color={'#555'} name={'logo-bitcoin'} size={50}/>,title:'价目中心'},
        {icon:<Ionicons color={'#555'} name={'card'} size={50}/>,title:'团体洗衣'},
      ],
      bottomCarouselData:[
        {addressUser:'北京用户',phone:'137****0118',comment:'非常好，服务很好，特别热心，服务热情'},
        {addressUser:'深圳用户',phone:'129****0118',comment:'非常好2，服务很好，特别热心，服务热情'},
        {addressUser:'上海用户',phone:'400****0118',comment:'非常好3，服务很好，特别热心，服务热情'},
      ]
    }
  }
  render() {
    let {cleanItemData,bestProduct,serviceIntroData,bottomCarouselData} = this.state;
    return (
      <ScrollView style={styles.box}>
        {/* 轮播图 */}
        <View style={styles.slidesBox}>
          <Image source={require('../../imgs/slides.jpg')} style={styles.slidesImg}/>
          {/* 城市 */}
          <View style={styles.cityBox}>
            <View style={styles.city}>
              <Text style={styles.cityName}>深圳</Text>
              <Ionicons name={'arrow-down-circle-outline'} size={30} color={'red'}/>
            </View>
          </View>
        </View>

        {/* 专业清洗 */}
        <View style={styles.cleanBox}>
          <Text style={styles.cleanName}>- 专业清洗 -</Text>
          <View style={styles.cleanItemBox}>
            {
              cleanItemData.map((item,i)=>{
                return <View key={i} style={styles.cleanItem}>
                  <Text>{item.title}</Text>
                  <Image source={item.imgUrl} style={styles.cleanItemImg}/>
                </View>
              })
            }
          </View>
        </View>

        {/* 优惠爆品 */}
        <View style={styles.bestProductBox}>
          <Text style={styles.bestProductName}>- 优惠爆品 -</Text>
          <View style={styles.bestProductItemBox}>
            {
              bestProduct.map((item,i)=>{
                return <View key={i} style={styles.bestProductItem}>
                  <Image source={item.imgUrl} style={styles.bestProductItemImg}/>
                  <View style={styles.bestProductPrice}>
                    <Text>￥{item.newPrice}</Text>
                    <Text style={styles.oldPrice}>￥{item.oldPrice}</Text>
                  </View>
                  <Text style={styles.bestProductDetail}>{item.detail}</Text>
                  <TouchableOpacity style={styles.fastShop}>
                    <Text style={styles.fastShopTxt}>立即抢</Text>
                  </TouchableOpacity>
                </View>
              })
            }
          </View>
        </View>

        {/* 服务介绍 */}
        <View style={styles.serviceIntroBox}>
          {
            serviceIntroData.map((item,i)=>{
              return <View style={styles.serviceItemBox} key={i}>
                <View style={styles.serviceWidth}>{item.icon}</View>
                <Text style={styles.txt}>{item.title}</Text>
              </View>
            })
          }
        </View>

        {/* 评价 */}
        <View style={styles.commentsBox}>
          <Image source={require('../../imgs/slides.jpg')} style={styles.commentImg}/>
          {/* 轮播图 */}
          <View style={styles.bottomCarBox}>
            <Carousel
              data={bottomCarouselData}
              renderItem={this._renderItem}
              sliderWidth={screenW}
              itemWidth={screenW*0.85}
              loop
            />
          </View>
          <TouchableOpacity style={styles.allComments}>
            <Text style={styles.allCommentsTxt}>[更多评论]</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }

  // 底部背景图片上的轮播图
  _renderItem = ({item, index}) => {
    return (
      <View style={styles.bottomCarItem} key={index}>
        <View style={styles.bottomPhone}>
          <Text style={styles.txt}>{ item.addressUser }</Text>
          <Text style={styles.txt}>{ item.phone }</Text>
        </View>
        <Text style={styles.txt}>“ { item.comment } ”</Text>
      </View>
    );
  }
}

const screenW = Dimensions.get('window').width;
const styles = StyleSheet.create({
  // 全局样式
  box:{
    backgroundColor:'#ebf0ff',
  },
  txt:{
    color:'#666'
  },

  // 轮播图
  slidesBox:{
    position: 'relative'
  },
  slidesImg: {
    width: screenW,
    height: screenW*(503/1201)
  },
  cityBox:{
    position:'absolute',
    width:screenW,
    alignItems:'center',
  },
  city:{
    height:40,
    borderRadius: 20,
    marginTop:50,
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    backgroundColor: 'rgba(255,255,255,0.6)',
    padding: 10,
  },
  cityName:{
    paddingLeft:5,
    paddingRight:10,
  },

  //专业清洗
  cleanBox:{
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingBottom:10,
  },
  cleanName:{
    color:'#B4B4B4',
    margin: 10,
    fontSize: 12,
  },
  cleanItemBox:{
    width:screenW,
    flexDirection: 'row',
    justifyContent:'space-around',
    marginTop: 10,
  },
  cleanItem:{
    flex:1,
    height: screenW*0.4,
    alignItems:'center'
  },
  cleanItemImg:{
    marginTop: 10,
    width:'80%',
    height:'80%'
  },

  // 优惠爆品
  bestProductBox:{
    marginTop:10,
    backgroundColor:'#fff',
    alignItems:'center',
    height:screenW*0.9
  },
  bestProductName:{
    color:'#B4B4B4',
    margin: 10,
    fontSize: 12,
    paddingBottom: 10,
  },
  bestProductItemBox:{
    width:screenW,
    flexDirection:'row',
    justifyContent:'space-around',
  },
  bestProductItem: {
    width: screenW * 0.5,
    height: screenW * 0.5,
    alignItems:'center',
  },
  bestProductItemImg:{
    width:'90%',
    height:'80%'
  },
  bestProductPrice:{
    flexDirection:'row',
    justifyContent:'space-around',
    height:30,
    alignItems:'center',
  },
  oldPrice:{
    textDecorationLine: 'line-through',
    color:'#B4B4B4',
    marginLeft:20,
  },
  bestProductDetail:{
    color:'#B4B4B4',
    height:50,
    textAlign:'center',
  },
  fastShop:{
    borderWidth:1,
    borderColor:'red',
    width: 80,
    height:30,
    borderRadius: 15,
    justifyContent:'center',
    alignItems:'center',
  },
  fastShopTxt:{
    color:'red'
  },

  // 服务介绍
  serviceIntroBox:{
    marginTop: 10,
    backgroundColor:'#fff',
    flexDirection:'row',
    padding:10,
  },
  serviceItemBox:{
    flex:1,
    alignItems:'center'
  },
  serviceWidth:{
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 10,
    width:54,
    alignItems:'center'
  },

  // 评价
  commentsBox:{
    width:screenW,
    height: screenW*(503/1201),
    position:'relative'
  },
  commentImg:{
    width:'100%',
    height: '100%',
  },
  bottomCarBox:{
    height: '65%',
    position:'absolute',
    top:10,
  },
  bottomCarItem:{
    height:'100%',
    backgroundColor:'#fff',
    padding: 10,
    justifyContent:'space-around'
  },
  bottomPhone:{
    flexDirection:"row",
    justifyContent:'space-around',
  },

  allComments:{
    position:'absolute',
    bottom:10,
    width:screenW,
    display:'flex',
    alignItems:'center'
  },
  allCommentsTxt: {
    color:'#fff',
  },
});

export default Index;